<template>

  <view class="com-list-item" :style="comListStyle">
    <view class="com-list-item-left">
      <slot name="header"></slot>
      <view v-if="props.comTitle || props.comDetail" class="com-list-item-left-text">
        <view class="com-list-item-left-text-title" :style="comTitleStyle">{{props.comTitle}}</view>
        <view v-if="props.comDetail!= ''" class="com-list-item-left-text-detail" :style="comDetailStyle">{{props.comDetail}}</view>
      </view>
    </view>

    <view class="com-list-item-center">
      <slot name="center"></slot>
    </view>

    <view class="com-list-item-right">
      <slot name="footer" />
      <view v-if="isArrow" class="com-list-item-right-icon">
        <u-icon :color="arrowColor" size="28" name="arrow-right"></u-icon>
      </view>
    </view>
  </view>
</template>

<script setup>

const props = defineProps({
  comTitle:{type:String,default:''},
  comTitleStyle:{
    type:Object,
  },
  comDetail:{type:String,default:''},
  comDetailStyle:{
    type:Object,
  },
  comListStyle:{
    type:Object,
  },
  isArrow:{type:Boolean,default:true},
  arrowColor:{type:String,default:'#8B8989'}

})

/*watch(
  () => [props.comListStyle, props.comDetailStyle],
  (value) => {
    formRef.value?.clearValidate();
    userInfo.value.password = "";
  }
);*/

</script>

<style lang="scss">
.com-list-item{

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 禁用点击高亮效果 */
  -webkit-focus-ring-color: rgba(0, 0, 0, 0); /* 禁用焦点时的样式 */

  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  flex-direction: row;
  cursor: pointer;
  padding:10rpx 0rpx;
  &-left,&-right{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow: hidden;
  }
  &-left{
    &-icon{display: flex;flex-direction: column;justify-content: center;}
    &-text{
      display: flex;
      flex-direction: column;
      justify-content: center;
      &-title{
        color:#303030;
        font-size:30rpx
      }
      &-detail{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;

        color:#8B8989;
        font-size:26rpx;
        -webkit-line-clamp: 2;
      }
    }
  }
  &-center{}
  &-right{
    &-icon{
      display: flex;
      flex-direction: row;
      justify-content:space-between;
      align-items: center;
      flex-wrap: wrap;
    }
  }
}

/* #ifndef APP-NVUE */



/* #endif */
</style>
